SUIPatternLibrary.PatternDetailView = function(){
var
    $el = undefined,
    observable = {},

    init = function(pattern) {
        pattern.relatedHTML = createRelatedPatternHTML(pattern.related);
        pattern.principlesHTML = createPrinciplesHTML(pattern.principles);
        $el = SUIPatternLibrary.TemplateManager.compileTemplate("pattern-detail", pattern);
        createDialog(function(){
            addInteraction(pattern.related);
        });
    },

    createPrinciplesHTML = function(principles){
        var html = "";
        for(var i = 0, max = principles.length; i < max; i++){
            html += principles[i].principle;
            if(i != principles.length - 1){
                html += ", ";
            }
        }
        return html;
    },

    createRelatedPatternHTML = function(patterns){
        var html = "";
        for(var i = 0, max = patterns.length; i < max; i++){
            html += "<span class='pattern-link' id='" + createLinkId(patterns[i].name) + "'>" + patterns[i].name + "</span>"
            if(i != patterns.length - 1){
                html += ", ";
            }
        }
        return html;
    },

    createLinkId = function(patternName){
        patternName = patternName.replace(" ", "-");
        patternName = patternName.toLowerCase();
        return 'link-' + patternName;
    },

    addInteraction = function(patterns){
        for(var i = 0, max = patterns.length; i < max; i++){
            addPatternLinkInteraction(patterns[i].name);
        }
    },

    addPatternLinkInteraction = function(patternName){
        var link = $("#" + createLinkId(patternName));
        link.click(function(){
            $(observable).trigger("patternClick", patternName);
            $el.remove();
        });
    },

    createDialog = function(callback){
        $el.dialog({
            modal: true,
            autoOpen: true,
            width: window.innerWidth/2,
            height: window.innerHeight*0.8,
            show: "fade",
            hide: "fade",
            open: callback
        });
    }

    return {
        init : init,
        on : function(event, callback){
            $(observable).on(event, callback);
        }
    }

};